<template>
  <div id="menu">
    <ul class="menu-box">
        <li class="menu-item" v-for="(menu,mid) in menu_list" :key="mid">
          <a :href="menu.link">
            <p :class="['menu-button','iconfont',menu.icon]"></p>
            <p class="menu-text">{{menu.text}}</p>
          </a>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  data:function(){
    return {
      menu_list:[
        {text:'首页',link:'',icon:'icon-shouye'},
        {text:'手册',link:'',icon:'icon-weibiaoti--'},
        {text:'博客',link:'',icon:'icon-Pensyumaobi'},
        {text:'视频',link:'',icon:'icon-shipin'},
        {text:'我的',link:'',icon:'icon-wode'}
      ]
    }
  },
  mounted(){

  },
  methods:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import url("../assets/css/iconfont.css");
  *{
    padding: 0;
    margin: 0;
  }
  .menu-box{
    width: 100%;
    height:60px;
    background-color: #dedede;
    display:flex;
    justify-content:space-between;
    align-items: center;
  }
  .menu-item{
    width:20%;
    height:60px;
    flex:0 0 auto;
    list-style: none;
  }
  .menu-item a{
    display:inline-flex;
    width:100%;
    height:60px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color:#333;
  }
  .menu-item p{
    width: 100%;
    height:30px;
    
    flex:0 0 auto;
  }
  .menu-btn{
    font-size: 60px;
  }
  .iconfont{
    font-size: 26px;
    text-align: center;
  }
  .menu-text{
    width: 100%;
    flex:0 0 auto;
    font-size:18px;
    line-height:30px;
    text-align:center;
  }
  .menu-box a:hover{
    color:cyan
  }
</style>